<template>
    <div class="page">
        <el-form :model="form" ref="formRef" inline class="p-4">
			<el-form-item prop="province" label="省份">
				<el-input v-model="form.province" placeholder="请输入省份名称">></el-input>
			</el-form-item>
			<el-form-item prop="city" label="城市">
				<el-input v-model="form.city" placeholder="请输入城市名称">></el-input>
			</el-form-item>
			<el-form-item prop="district" label="区">
				<el-input v-model="form.district" placeholder="请输入市区名称">></el-input>
			</el-form-item>
			<el-form-item prop="name" label="网点名称">
				<el-input v-model="form.name" placeholder="请输入网点名称">></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onQuery">查询</el-button>
				<el-button type="primary" @click="onReset">重置</el-button>
				<el-button type="primary" @click="saveOutlet('0')">新增网点</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="list" v-loading="loading" class="w-full">
			<el-table-column prop="name" label="网点名称" />
			<el-table-column prop="centerLat" label="纬度" />
			<el-table-column prop="centerLng" label="经度" />
			<el-table-column prop="province" label="省份" />
			<el-table-column prop="city" label="城市" />
			<el-table-column prop="district" label="城市区域" />
			<el-table-column prop="radius" label="半径(米)" />
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{row}">
					<el-button @click="delOutlet(row)" type="warning" link>删除</el-button>
					<el-button @click="saveOutlet(row.id)" type="primary" link>编辑</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination 
		layout="prev, pager, next" 
		:total="50" 
		v-model:page-size="pagination.limit" 
		v-model:current-page="pagination.page"
		/>
    </div>   
</template>
    
<script setup lang='ts'>
import router from '@/router';
import request from '@/utils/request';
import type { AnyObj } from '@/utils/type';
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

const formRef = ref<FormInstance>();

const form = reactive({
	province: '',
	city: '',
	district: '',
	name: '',
});

const pagination = reactive({
	total: 0,
	limit: 20,
	page: 1
});

const list = ref<AnyObj[]>([
	{
		centerLat: '12d2',
		centerLng: 'asd23',
		city: 'asdsa',
		district: ' 水电费',
		name: '啊沙发上地方',
		id: 1,
		province: '额娃的 5 他',
		radius: '1'
	}
]);

const loading = ref(false);

/**
 * 重置表单
 */
const onReset = () => {
	formRef.value?.resetFields();
};

/**
 * 点击查询
 */
const onQuery = () => {
	pagination.page = 1;
	getTableData();
};

/**
 * 获取表格数据
 * @param params 请求的数据
 */
const getTableData = async () => {
	loading.value = true
	try {
		list.value = await request({
			url: '/api/sys/outlet/list',
			method: 'post',
			contentTypeIsForm: false,
			data: {
				...form,
				page: pagination.page,
				limit: pagination.limit
			},
			errorToast: true,
			showLoading: {}
		});
	} catch (error) {
		
	} finally {
		loading.value = false;
	}
};

/**
 * 点击删除网点
 */
const delOutlet = async (row: AnyObj) => {
	try {
		console.log('row: ', row);
		await ElMessageBox.confirm("确定删除该网点", "提示", {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		});
		await request({
			url: '/api/sys/outlet/delele',
			method: 'post',
			data: {
				outletId: row.id
			},
			contentTypeIsForm: true,
			errorToast: true,
			showLoading: {text: '正在删除...'}
		});
		ElMessage.success("删除成功");
		getTableData();
	} catch (error) {
		
	}
};

/**
 * 点击新增/编辑网点
 */
const saveOutlet = (id: string | number) => {
	router.push({
		name: 'SaveOutlet',
		params: {
			id
		}
	});
};

onMounted(() => {
	getTableData();
});
</script>
    
<style lang="scss" scoped>
    
</style>